import React from 'react';
import { Table, Button, Space } from 'antd';
import { EyeOutlined, DeleteOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { Link } from 'react-router-dom';

// 自定义钩子
function useTableData() {
    const [data, setData] = useState([
        { key: '1', id: '001', name: 'John Brown', item: 'ite1', details: 'Details 1' },
        { key: '2', id: '002', name: 'John Brown', item: 'ite2', details: 'Details 2' },
        { key: '3', id: '003', name: 'John Brown', item: 'ite3', details: 'Details 3' },
    ]);

    const handleDetails = (record: any) => {
        console.log('Details:', record);
    };

    const handleDelete = (key: string) => {
        setData(data.filter((item) => item.key !== key));
    };

    return { data, handleDetails, handleDelete };
}

const TableComponent: React.FC = () => {
    const { data, handleDetails, handleDelete } = useTableData();

    const columns = [
        {
            title: '序号',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '标准编号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '标准名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '项目名称',
            dataIndex: 'item',
            key: 'item',
        },
        {
            title: '详情',
            dataIndex: 'details',
            key: 'details',
            render: (text: string, record: any) => (
                <Link to='/Test_item_Person_1'>
                    <Button type="link" onClick={() => handleDetails(record)}>
                        <EyeOutlined /> 查看
                    </Button>
                </Link>
            ),
        },
    ];

    return <Table dataSource={data} columns={columns} pagination={false} />;
};

export default TableComponent;